<template>
  <div ref="printContent" class="quote-print-view" v-if="quote">
    <!-- 标题 -->
    <div class="print-header">
      <h1 class="print-title">报价单</h1>
      <div class="print-no">报价单号：{{ quote.quoteNo }}</div>
    </div>

    <!-- 基本信息 -->
    <div class="print-section">
      <h2 class="section-title">基本信息</h2>
      <table class="info-table">
        <tr>
          <td class="label">客户名称：</td>
          <td class="value">{{ quote.customerName || '-' }}</td>
          <td class="label">销售人员：</td>
          <td class="value">{{ quote.salesPerson || '-' }}</td>
        </tr>
        <tr>
          <td class="label">报价单号：</td>
          <td class="value">{{ quote.quoteNo }}</td>
          <td class="label">状态：</td>
          <td class="value">{{ getStatusLabel(quote.status) }}</td>
        </tr>
        <tr>
          <td class="label">创建时间：</td>
          <td class="value">{{ formatDate(quote.createTime) }}</td>
          <td class="label">有效期：</td>
          <td class="value">{{ quote.validDays ? `${quote.validDays}天` : '-' }}</td>
        </tr>
        <tr v-if="quote.remarks">
          <td class="label">备注：</td>
          <td class="value" colspan="3">{{ quote.remarks }}</td>
        </tr>
      </table>
    </div>

    <!-- 产品明细 -->
    <div class="print-section">
      <h2 class="section-title">产品明细</h2>
      <table class="items-table">
        <thead>
          <tr>
            <th class="col-index">序号</th>
            <th class="col-name">产品名称</th>
            <th class="col-price">单价</th>
            <th class="col-quantity">数量</th>
            <th class="col-total">小计</th>
            <th class="col-remarks">备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in quote.items" :key="item.itemId || index">
            <td class="col-index">{{ index + 1 }}</td>
            <td class="col-name">{{ item.productName }}</td>
            <td class="col-price">¥{{ formatCurrency(item.unitPrice) }}</td>
            <td class="col-quantity">{{ item.quantity }}</td>
            <td class="col-total">¥{{ formatCurrency(item.totalPrice) }}</td>
            <td class="col-remarks">{{ item.remarks || '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 金额汇总 -->
    <div class="print-section">
      <div class="summary-table">
        <div class="summary-row">
          <span class="summary-label">总价：</span>
          <span class="summary-value">¥{{ formatCurrency(quote.totalAmount) }}</span>
        </div>
        <div class="summary-row">
          <span class="summary-label">优惠金额：</span>
          <span class="summary-value">¥{{ formatCurrency(quote.discountAmount) }}</span>
        </div>
        <div class="summary-row final-row">
          <span class="summary-label">最终金额：</span>
          <span class="summary-value">¥{{ formatCurrency(quote.finalAmount) }}</span>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="print-footer">
      <div class="footer-text">本报价单由系统自动生成</div>
      <div class="footer-date">打印时间：{{ new Date().toLocaleString('zh-CN') }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Quote } from '@/types/quote'
import { quoteStatusOptions } from '@/types/quote'
import { formatCurrency } from '@/utils/format'

interface Props {
  quote: Quote | undefined
}

const props = defineProps<Props>()

const printContent = ref<HTMLElement>()

// 格式化日期
const formatDate = (date: Date | string | undefined) => {
  if (!date) return '-'
  if (typeof date === 'string') {
    return date
  }
  return date.toLocaleString('zh-CN')
}

// 获取状态标签
const getStatusLabel = (status: number) => {
  const option = quoteStatusOptions.find(item => item.value === status)
  return option?.label || '未知'
}

defineExpose({
  printContent
})
</script>

<style scoped>
.quote-print-view {
  width: 210mm;
  padding: 20mm;
  background: white;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'SimHei', Arial, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.print-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #000;
  padding-bottom: 15px;
}

.print-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.print-no {
  font-size: 14px;
  color: #666;
}

.print-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 4px solid #1890ff;
  padding-left: 10px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.info-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.info-table .label {
  background-color: #f5f5f5;
  font-weight: bold;
  width: 120px;
  text-align: right;
}

.info-table .value {
  text-align: left;
  width: auto;
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.items-table th,
.items-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 14px;
}

.items-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.items-table .col-index {
  width: 50px;
}

.items-table .col-name {
  width: 200px;
  text-align: left;
}

.items-table .col-price {
  width: 100px;
}

.items-table .col-quantity {
  width: 80px;
}

.items-table .col-total {
  width: 100px;
}

.items-table .col-remarks {
  width: auto;
  text-align: left;
}

.summary-table {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 20px;
}

.summary-row {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  padding: 8px 15px;
  font-size: 14px;
}

.summary-label {
  font-weight: bold;
  margin-right: 20px;
  width: 100px;
  text-align: right;
}

.summary-value {
  width: 120px;
  text-align: right;
}

.final-row {
  font-size: 18px;
  font-weight: bold;
  border-top: 2px solid #000;
  margin-top: 5px;
  padding-top: 12px;
}

.print-footer {
  margin-top: 50px;
  text-align: center;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}

.footer-text {
  margin-bottom: 5px;
}

.footer-date {
  color: #999;
}

/* 打印样式 */
@media print {
  .quote-print-view {
    margin: 0;
    padding: 20mm;
  }
}
</style>

